<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content= "no-cache"/>
    <meta http-equiv="Cache-Control" content= "no-cache"/>
    <meta http-equiv="Expires" content= "0"/>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.js"></script>

    <script src="./index.js"></script>
    <title>浏览器数据库测试</title>
</head>
<body>
<div id="app">
    <div style="padding: 5px 10px">
        <el-button @click="add" type="primary" size="mini" icon="el-icon-plus">添加</el-button>
        <z-dialog ref="zdialog" title="添加" width="500px" @confirm="confirm">
            <el-form :model="user" :rules="rules" ref="form"  label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="user.sex"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="user.age"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="user.phone"></el-input>
                </el-form-item>
            </el-form>
        </z-dialog>
    </div>
    <el-table :data="data" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

</div>
</body>
<script>
    let vue = new Vue({
        el: '#app',
        data(){
            return {
                data: [],
                user: {
                    name: null,
                    sex: null,
                    age: null,
                    phone: null
                },
                rules: {
                    name: [
                        { required: true, message: '请输入姓名' },
                    ],
                    sex: [
                        { required: true, message: '请输入性别'}
                    ],
                    age: [
                        { required: true, message: '请输入年龄'}
                    ],
                    phone: [
                        { required: true, message: '请输入手机号'}
                    ],
                }
            }
        },
        created(){
            //创建数据库
            let _this = this;
            this.db = new DB({
                dbName: 'dbtest',
                tables: [
                    {
                        name: 'user',
                        storeObj: { autoIncrement: true},
                        indexs: [
                            {key: 'name', unique: false},
                            {key: 'sex', unique: false},
                            {key: 'age', unique: false},
                            {key: 'phone', unique: true},
                        ]
                    }
                ],
                onsuccess(){
                    _this.init()
                },
                onupgradeneeded(){
                    console.log('onupgradeneeded')
                }
            });
        },
        mounted(){
        },
        methods: {
            init(){
                this.zdialog = this.$refs.zdialog;
                this.db.connect('user');
                this.queryList();
            },
            queryList(){
                this.db.readAll().then(list => {
                    this.data = list;
                    console.log(JSON.parse(JSON.stringify(list)))
                })
            },
            add(){
                this.isEdit = false;
                this.zdialog.show();
                this.$nextTick(() => {
                    this.user = { name: null,sex: null,age: null,phone: null};
                    this.resetFields();
                })
            },
            confirm(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.isEdit ?  this.onEditData() : this.onAddData();
                    } else {
                        this.zdialog.loading(false);
                        return false;
                    }
                });
            },
            onAddData(){
                this.db.add({
                    name: this.user.name,
                    sex: this.user.sex,
                    age: this.user.age,
                    phone: this.user.phone,
                }).then(e => {
                    this.resetFields();
                    this.zdialog.hide();
                    this.$message.success('添加成功！');
                    this.queryList();
                }).catch(err => {
                    this.zdialog.loading(false);
                    this.$message.error('添加失败！')
                })
            },
            onEditData(){
                this.db.put({
                    name: this.user.name,
                    sex: this.user.sex,
                    age: this.user.age,
                    phone: this.user.phone,
                }, this.user.id).then(e => {
                    this.resetFields();
                    this.zdialog.hide();
                    this.$message.success('添加成功！');
                    this.queryList();
                }).catch(err => {
                    this.zdialog.loading(false);
                    this.$message.error('添加失败！');
                })
            },
            del(item){
                this.$confirm('确认删除?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.db.del(item.id).then(() => {
                        this.$message.success('删除成功！');
                        this.queryList();
                    }).catch(() => {
                        this.$message.error('删除成功！');
                    })
                }).catch(() => {})
            },
            edit(item){
                this.isEdit = true;
                this.zdialog.show();
                Object.assign(this.user, {
                    id: item.id,
                    name: item.name,
                    age: item.age,
                    sex: item.sex,
                    phone: item.phone,
                })
            },
            resetFields(){
                this.$refs.form && this.$refs.form.resetFields();
            }

        }
    })
</script>
</html>